<template>
   <div class="login">
    <div class="login-box">
        <h3>请登录</h3>
        <van-form @submit="onSubmit">
  <van-field
    class="input-box"
    v-model="formData.username"
    placeholder="输入手机号"
    :rules="[{ required: true,pattern:/^1[3-9]\d{9}$/, message: '请输入手机号' }]"
  />
  <van-field
   class="input-box"
    v-model="formData.password"
    type="password"
    placeholder="请输入密码"
    :rules="[{ required: true,pattern:/^\d{4}$/, message: '请输入密码' }]"
  />
  <div class="btn" style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  </div>
  </van-form>
    </div>
    
   </div>
</template>

<script>
import {Toast} from "vant";
import {user_login} from "../utils/apis"
export default {
    data() {
    return {
      formData:{
        username: '',
        password: '',
      }
      
    };
  },
  methods: {
    onSubmit() {
      user_login(this.formData).then((res)=>{
        console.log(res.data)
         if( res.data.code == 200 ){
          //保存用户信息,token
          localStorage.setItem('token',res.data.token);
          localStorage.setItem('userinfo', JSON.stringify( res.data.userinfo ) );
          //自动跳转到首页
          this.$router.push('/');
          Toast.success('登录成功!')
        }else{
          Toast.fail('登录失败!')
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">


.login-box{
  width: 100%;
  height: 100%;
  text-align: center;
 
}

</style>